<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理</div>
      <div></div>
      <div>我的訂單</div>
    </div>
    <div class="content">
      <div class="contenttop">
        <div>訂單號：{{list.orderInfo.orderSn}}</div>
        <!-- <div class="topimg" @click="goback"> 
          <img src="@/assets/xiaoyu.png" alt="">
          <div>返回</div>
        </div> -->
      </div>
      <div class="contentbottom">
        <div class="paywait">
          <div class="gopay">等待發貨</div>
          <!-- <div class="time"> 
            <img src="@/assets/time.png" alt="">
            <div>9分01秒</div>
          </div> -->
          <!-- <div class="goright">立即支付</div> -->
          <!-- <div class="gocancel" @click="gotui()">申請退款</div> -->
        </div>
        <div class="goti">
          <img src="@/assets/ti.png" alt="">
          <div>提交訂單</div>
          <div>{{list.orderInfo.addTime}}</div>
        </div>
        <div class="waitpay">
          <div class="waitpaybottoms">
            <div style="color:#E4393C">...</div>
            <img src="@/assets/hongjian.png" alt="">
            <div style="color:#E4393C">...</div>
          </div>
        </div>
        <div class="goti1">
          <img src="@/assets/bank1.png" alt="">
          <div>付款成功</div>
          <div>{{list.orderInfo.payTime}}</div>
        </div>
        <div class="waitpay">
          <div class="waitpaytop">正在出庫</div>
          <div class="waitpaybottom">
            <div style="color:#E4393C">...</div>
            <img src="@/assets/hongjian.png" alt="">
            <div >...</div>
          </div>
        </div>
        <div class="goti2">
          <img src="@/assets/fa.png" alt="">
          <div>商品發貨</div>
        </div>
       <div class="waitpay">
          <div class="waitpaybottoms">
            <div>...</div>
            <img src="@/assets/hui.png" alt="">
            <div>...</div>
          </div>
        </div>
        <div class="goti3">
          <img src="@/assets/daifa.png" alt="">
          <div>確認收貨</div>
        </div>
        <div class="waitpay">
          <div class="waitpaybottoms">
            <div>...</div>
            <img src="@/assets/hui.png" alt="">
            <div>...</div>
          </div>
        </div>
        <div class="goti2">
          <img src="@/assets/wan.png" alt="">
          <div>交易完成</div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detailtop">
        <div>收貨人信息</div>
        <div>付款信息</div>
        <div>訂單信息</div>
      </div>
      <div class="detailbottom">
        <div class="detailleft">
          <div class="line">
            <div>聯系人：</div>
            <div>{{list.orderInfo.consignee}}</div>
          </div>
          <div class="line">
            <div>地址：</div>
            <div>{{list.orderInfo.address | replaceval}}</div>
          </div>
          <div class="line">
            <div>手機號碼：</div>
            <div>{{list.orderInfo.mobile}}</div>
          </div>
        </div>
        <div class="detailcenter"> 
          <div class="line">
            <div>付款方式： </div>
            <!-- <div>{{list.orderInfo.consignee}} </div> -->
            <div v-if="list.orderInfo.payType == 1">PayPal支付</div>
            <div v-if="list.orderInfo.payType == 2">FirstPay支付</div>
            <div v-if="list.orderInfo.payType == 3">ATM支付</div>
            <div v-if="list.orderInfo.payType == 4">现金支付</div>
            <div v-if="list.orderInfo.payType == 5">八達通支付</div>
            <div v-if="list.orderInfo.payType == 6">VISA支付</div>
            <div v-if="list.orderInfo.payType == 7">Master支付</div>
            <div v-if="list.orderInfo.payType == 8">銀聯支付</div>
            <div v-if="list.orderInfo.payType == 9">EPS支付</div>
            <div v-if="list.orderInfo.payType == 10">支付寶 (Alipay)支付</div>
            <div v-if="list.orderInfo.payType == 11">微信支付(WeChat Pay)支付</div>
            <div v-if="list.orderInfo.payType == 12">其他支付</div>
          </div>
          <div class="line">
            <div>付款時間：</div>
            <div>{{list.orderInfo.payTime}}</div>
          </div>
          <div class="line">
            <div>付款金額：</div>
            <div>${{list.orderInfo.actualPrice}} </div>
          </div>
        </div>
        <div class="detailright">
          <div class="line">
            <div>下單編號：</div>
            <div>{{list.orderInfo.orderSn}} </div>
          </div>
          <div class="line">
            <div>下單時間：</div>
            <div>{{list.orderInfo.addTime}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods" >
      <div class="goodstop">
        <div>商品信息</div>
        <div>單價 </div>
        <div>數量 </div>
        <div>小計 </div>
        <!-- <div> 核銷碼</div> -->
      </div>
       <!-- @click="goorderdetail(index)" -->
      <div class="goodsbottom" v-for="(item,index) in list.orderGoods" :key="index">
        <div class="bao">
          <img :src="item.picUrl" alt="">
          <div>{{item.goodsName}}</div>
        </div>
        <div> ${{item.price}}</div>
        <div>x{{item.number}} </div>
        <div>${{item.price * item.number}} </div>
        <!-- <img  v-if="index == 0" src="@/assets/good.png" alt=""> -->
        <vue-qr :text="item.id" :size="200" :margin="0"></vue-qr>
      </div>
      <div class="zongs">
        <div class="zong"> 
            <div>商品數量：</div>
            <div>{{list.orderGoods.length}}</div>
        </div>
        <div class="zong"> 
            <div>商品總金額：</div>
            <div>${{list.orderInfo.goodsPrice}}</div>
        </div>
        <div class="zong"> 
            <div>運費：</div>
            <div>${{list.orderInfo.freightPrice}}</div>
        </div>
        <div class="zong"> 
            <div>折扣：</div>
            <div>${{list.orderInfo.discountPrice}}</div>
        </div>
        <div class="zong"> 
            <div>優惠碼{{list.orderInfo.home}}：</div>
            <div>${{list.orderInfo.promoCodePrice}}</div>
        </div>
        <div class="zong"> 
            <div>優惠券：</div>
            <div>${{list.orderInfo.couponPrice}}</div>
        </div>
      </div>
      <div class="ying">
        <div>應付總額：</div>
        <div>${{list.orderInfo.actualPrice}}</div>
      </div>
      <!-- <div class="togoods">
      </div> -->
    </div>
  </div>
</template>
<script>
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
// import {userInfo,updateUserInfo} from '@/api/user';
import {del,cancel} from '@/api/order';
import { getToken } from '@/utils/auth'
import vueQr from "vue-qr"
export default {
   components: {
    vueQr
  },
  data(){
    return{
      list:{},
      price:0,
      id:''
    }
  },
  filters:{
    replaceval:function(data){
     return data.replace('值','')
    }
  },
  mounted(){
    var id = this.$route.query.id
    this.id = id
     del({userId:getToken(),orderId:id}).then(response => {
        // console.log(response)
        if (response.errno == 0) {
          this.list=response.data
          var that = this
            for(var i= 0;i<that.list.orderGoods.length;i++){
              var a = 0
              a += that.list.orderGoods[i].number * that.list.orderGoods[i].price
              that.price += a
              // console.log(that.price)
            }
        } else {
          this.$message({
              type: 'error',
              message: response.errmsg
          })
        }
      })
  },
  methods: {
    goback(){
      this.$router.back(-1)
    },
    gotui(){
      this.$router.push({
          path:'/orderback',
          query:{
            id:this.id
          }
        })
    },
  }
}
</script>
<style scoped>
  .wrap{
    width: 60%;
    /* height: 1358px; */
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 15px;
    margin:0px auto;
    margin-top: 20px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    height: 320px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .contenttop{
    width: 92%;  
    display: flex; 
    padding:0 39px;
    align-items: center;  
    height: 60px;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .contenttop>div:nth-child(1){     
    display: flex; 
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .topimg{
    display: flex;
    height: 60px;
    align-items: center;
  }
  .topimg img{
      padding:0 5px;
      height: 12px;
  }
  .topimg div{    
    display: flex; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  } 
  .time{
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
    margin:5px 0;
  }
 .time div{    
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E4393C;
  }
  .time img{    
    width: 12px;
    height: 12px;
  }
  .contentbottom{
      display: flex;
  }
  .paywait{
      width: 15%;
      padding-top:39px;
      padding-left:20px;
      padding-right:20px;
      text-align: center;
  }
  .gopay{
    height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #E4393C;
  }

  .goright{
    width: 100px;
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    border: 1px solid #E4393C;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E4393C;
    margin-top:20px;
  }
  .gocancel{
    width: 100px;
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    margin-top:45px;
  }
  .goti{
    padding-top:85px;
    /* padding-left:20px;
    padding-right:20px; */
    text-align: center;
  }
 .goti>img:nth-child(1){
    width: 19px;
  }
 .goti>div:nth-child(2){
    height: 45px;
    font-size: 14px;
    line-height: 45px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .goti>div:nth-child(3){
    height: 26px;
    width: 70px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
 .goti>div:nth-child(4){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
   .goti1{
    padding-top:85px;
    /* padding-left:20px;
    padding-right:20px; */
    text-align: center;
  }
 .goti1>img:nth-child(1){
    width: 27px;
  }
 .goti1>div:nth-child(2){
    height: 50px;
    font-size: 14px;
    line-height: 57px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .goti1>div:nth-child(3){
    height: 26px;
    width: 70px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
 .goti1>div:nth-child(4){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  
  .goti2{
    padding-top:85px;
    /* padding-left:20px;
    padding-right:20px; */
    text-align: center;
  }
 .goti2>img:nth-child(1){
    width: 25px;
  }
 .goti2>div:nth-child(2){
    height: 45px;
    font-size: 14px;
    line-height: 45px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .goti2>div:nth-child(3){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
 .goti2>div:nth-child(4){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  
  .goti3{
    padding-top:85px;
    /* padding-left:20px;
    padding-right:20px; */
    text-align: center;
  }
 .goti3>img:nth-child(1){
    width: 30px;
  }
 .goti3>div:nth-child(2){
    height: 45px;
    font-size: 14px;
    line-height: 45px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .goti3>div:nth-child(3){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
 .goti3>div:nth-child(4){
    height: 26px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .waitpay{
    padding-top:50px;
    text-align: center;
  }
  .waitpaytop{
    text-align: center;
    height: 30px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #E4393C;
  }
  .waitpaybottom{
    display: flex;
    height: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottom>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottom>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottom>div:nth-child(3){
      letter-spacing: 6px;
      color: #9A9A9A;
  }
  .waitpaybottoms{
    display: flex;
    height: 20px;
    padding-top:30px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottoms>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottoms>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottoms>div:nth-child(3){
      letter-spacing:6px;
      color: #9A9A9A;
  }
.detail{
    margin-top:20px;
    width: 100%;  
    height: 227px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .detailtop{
    width: 96%;  
    display: flex; 
    padding:0 20px;
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .detailtop>div:nth-child(1){
    width: 33%;
  }
  .detailtop>div:nth-child(2){
    width: 33%;
  }
  .detailtop>div:nth-child(3){
    width: 33%;
  }
 .detailbottom{
    display: flex;
    height: 167px;
  }
  .detailleft{
    width: 28%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    border-right:1px solid #E5E5E5;
  }
  .detailcenter{
    width: 28%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    border-right:1px solid #E5E5E5;
  }
  .detailright{
    width: 33%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
  }
  .line{
    width: 100%;
    padding:2px 0;
    font-size: 12px !important;
    text-align: left;
    margin: 0 auto;
    display: flex;
  }
  .line>div:nth-child(1){
    width: 32%;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .line>div:nth-child(2){
    width: 68%;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .togoods{
    width: 100%;  
    height: 100px;
    background: #FFFFFF;
    border-radius: 10px;
  }
.goods{
    margin-top:20px;
    width: 100%;  
    /* height: 450px; */
    background: #FFFFFF;
    border-radius: 10px;
  }
  .goodstop{
    width: 96%;  
    display: flex; 
    padding:0 20px;
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .goodstop>div:nth-child(1){
    width: 34%;
  }
  .goodstop>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(5){
    width: 16%;
    text-align: center;
  }
 .goodsbottom{
    width: 96%;  
    height: 104px;
    line-height: 104px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
  }
  .goodsbottom>div:nth-child(1){
    width: 34%;
  }
  .bao{
    display: flex;
  }
  .bao img{
    width: 79px;
    height: 79px;
    padding:12px 0;
  }
  .bao div{
    padding-left: 12px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
  }
  .goodsbottom>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>img:nth-child(5){
    width: 79px;
    margin: 0 auto;
    padding:12px;
  }
  .zong{
      width: 95%;
      /* margin-left:70%; */
      display: flex;
      height: 25px;
      justify-content: right;
      text-align: right;
      box-sizing: border-box;

  }
  .zong>div:nth-child(1){
    width: 90%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zong>div:nth-child(2){
    width: 10%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zongs{
      padding-top:20px;
      padding-bottom:10px;
  }
  .ying{
    width: 22%;
    padding-left:78%;
    display: flex;
    text-align: right;
    right: 0px;
    align-items: center;
    height: 45px;
    background: #F4F4F4;
  }
  .ying>div:nth-child(1){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #666666;
  }
  .ying>div:nth-child(2){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #E4393C;
  }
</style>